<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第一个页面</title>		
		<style type="text/css">	
			/*
			//---------------------------  定位   --------------------------------
			position: 				absolute 生成绝对定位的元素，相对于 父元素进行定位。
									fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。
									relative 生成相对定位的元素，相对于当前位置进行定位。
			
			left: 					10px / 50% /5rem....
			top: 					10px / 50% /5rem....
			right: 					10px / 50% /5rem....
			bottom: 				10px / 50% /5rem....
 			
 			//---------------------------  浮动    --------------------------------
 			float:  				left
 									right
 			
 			clear: 					both;清除所有浮动
 			
 			//---------------------------  内边距与外边距    ---------------------------
 			margin:  				10px
 			padding:  				10px
 									
 			//---------------------------  2D/3D转换    --------------------------------
 			transform: 				偏移  translate(x,y) 
									缩放  scale(x,y)
									旋转  rotate(deg)
									倾斜  skew(Xdeg,Ydeg)
 			
 												
 			//---------------------------  行内块   --------------------------------
 			父元素
 			text-align: 			left / right;设置横向位置
			line-height: 			50px;设置纵向位置
			
 			子元素
			display:inline-block
			
						
			//---------------------------  弹性盒子   --------------------------------
			父元素
			display:flex;
			align-items: 			stretch 默认值。项目被拉伸以适应容器。 
									center 项目位于容器的中心。
									flex-start 项目位于容器的开头。 
									flex-end 项目位于容器的结尾。 
									baseline 项目位于容器的基线上。
									
			子元素 
			margin:auto;			水平，锤子居中对齐
			
			align-self(元素对齐方式)	stretch 默认值。项目被拉伸以适应容器。 
									center 项目位于容器的中心。
									flex-start 项目位于容器的开头。 
									flex-end 项目位于容器的结尾。 
									baseline 项目位于容器的基线上。
			
			*/
		</style>
	</head>
	<body>
		
	</body>
</html>
